<template>
  <div>
    <h1>发布课程</h1>
    <div class="draft-container">
      <div class="left">
        <img :src="draftCourse.cover" alt="">
      </div>
      <div class="right">
        <h3>{{draftCourse.title}}</h3>
        <div class="top-margin">共{{draftCourse.lessonNum}}课时</div>
        <div class="top-margin">所属分类:{{draftCourse.subjectParent}}-{{draftCourse.subject}}</div>
        <div class="top-margin">课程讲师:{{draftCourse.teacher}}</div>
      </div>
    </div>
    <div class="bottom-sty">
      <el-button @click="preStep">上一步</el-button>
      <el-button @click="nextStep">发布课程</el-button>
    </div>

  </div>
</template>

<script>

  import * as CourseAPI from '../../../api/course'

  export default {
    name: 'PublishCourse',
    data:function() {

      return {

        draftCourse: {}
      }
    },
    created:function() {

      this.loadDraftCourse();
    },
    methods: {

      async nextStep(){

        await CourseAPI.publishCourse(this.draftCourse.id)

        this.$emit('stepAction',1);
      },
      preStep() {

        this.$emit('stepAction',-1);
      },
      async loadDraftCourse() {

        this.draftCourse = await CourseAPI.findCourseDraft(this.$parent.courseId);

      }
    }
  }
</script>

<style scoped>

  .bottom-sty{

    text-align: center;
  }

  .draft-container{

    display: flex;

    margin: 20px 150px;
  }

  .draft-container .left{


  }

  .draft-container .right {

    flex: 1;
  }

  .draft-container .left img{

    width: 240px;
    height: 135px;
    margin: 20px;
  }

  .top-margin{

    margin-top: 10px;
  }
</style>
